import React, { useState } from 'react'
import img from '../assets/images/logo.png'
import '../assets/css/header.css'
import HeadersXia from './HeadersXia'
import { Modal } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Space } from 'antd';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import { Button, notification } from 'antd';
import CaptchaComponent from './CaptchaComponent ';
import img3 from '../assets/images/形状结合.png'

export default function Headers() {
  const user = localStorage.getItem('zhangh')
  let newUser = user.replace('"', '').replace('"', '');
  let [name,setName] = useState(newUser)
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isModalOpenPhone, setIsModalOpenPhone] = useState(false);
  const [juiPwd, setJuiPwd] = useState('')
  const [xuiPwd, setXuiPwd] = useState('')
  const [newXuiPwd, setNewXuiPwd] = useState('')
  const [api, contextHolder] = notification.useNotification();
  const [getuser,steGetuser] = useState('')
  const [yanPwd,setYanPwd] = useState('')
  let nav = useNavigate()
  let navs = useNavigate()
  const items = [
    {
      label: '更换密码',
      key: '1',
    },
    {
      label: '更换手机号',
      key: '2',
    },
    {
      label: '退出登录',
      key: '3',
    },
  ];
  const [open, setOpen] = useState(false);
  const handleMenuClick = (e) => {
    if (e.key === '3') {
      nav('/login')
    }
    if (e.key === '1') {
      setIsModalOpen(true);
    }
    if (e.key === '2') {
      setIsModalOpenPhone(true);
    }
  };
  const handleOpenChange = (nextOpen, info) => {
    if (info.source === 'trigger' || nextOpen) {
      setOpen(nextOpen);
    }
  };

  const onjuiPwd = (e) => {
    setJuiPwd(e.target.value)
  }
  const onxuiPwd = (e) => {
    setXuiPwd(e.target.value)
  }
  const onnewXuiPwd = (e) => {
    setNewXuiPwd(e.target.value)
  }
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const handleCancelPhone = () => {
    setIsModalOpenPhone(false);
  };
  const toGetuser = (e) => {
    steGetuser(e.target.value)
  }
  const getYanPwd = (e) => {
    setYanPwd(e.target.value)
  }

  //修改密码
  const gatIdpwd = () => {
    axios.get('http://172.16.17.120:8080/getpwd')
      .then(res => {
        let loginIndex = res.data.findIndex((item) => item.user === newUser)
        let kuPwd = res.data[loginIndex].paw
        console.log(kuPwd);
        if (kuPwd == juiPwd) {
          if (xuiPwd === newXuiPwd) {
            axios.post('http://172.16.17.120:8080/xuigai', {
              paw: newXuiPwd,
              id: loginIndex + 1
            })
              .then(item => {
                
                console.log('修改成功');
                setIsModalOpen(false);
                api.open({
                  description:
                    '修改成功',
                  style: {
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    position: 'relative',
                    color: 'red'
                  },
                });
              })
          } else {
            console.log('密码不一致');
          }
        } else {
          console.log('旧密码不正确');
        }
      })
  }

  //修改手机号
  const gatIdPhone = () => {
    axios.get('http://172.16.17.120:8080/getpwd')
    .then(res => {
      let loginIndex = res.data.findIndex((item) => item.user === newUser)
      let kuPwd = res.data[loginIndex].paw
      console.log(kuPwd);
        if (yanPwd === kuPwd) {
          axios.post('http://172.16.17.120:8080/xuiuser', {
            user: getuser,
            id: loginIndex + 1
          })
            .then(item => {
              console.log('手机号更改成功');
              setName(getuser)
              localStorage.setItem('zhangh',JSON.stringify(getuser))
              setIsModalOpenPhone(false);
              api.open({
                description:
                  '手机号更改成功',
                style: {
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  position: 'relative',
                  color: 'red'
                },
              });
            })
        } else {
          console.log('密码错误');
        }
    })
  }
  return (
    <div className='h-top'>
      {contextHolder}
      <div className='l-left'>
        <img src={img} alt="" />
        <HeadersXia></HeadersXia>
        <div className='iconfont icon-shuxian'></div>
        <span className='xaingg' onClick={()=> {navs('/home/project')}}>项目管理</span>
      </div>
      <div className='l-right'>
        <Dropdown
          menu={{
            items,
            onClick: handleMenuClick,
          }}
          onOpenChange={handleOpenChange}
          open={open}
        >
          <a onClick={(e) => e.preventDefault()}>
            <Space style={{ color: '#fff' }}>
              {name}
              <DownOutlined />
            </Space>
          </a>
        </Dropdown>
      </div>

      <Modal title="修改密码" footer={null} open={isModalOpen} onCancel={handleCancel}>
        <div className='inputpwd'>
          <input type="text" value={juiPwd} onChange={onjuiPwd} placeholder='输入旧密码' />
        </div>
        <div className='inputpwd'>
          <input type="text" value={xuiPwd} onChange={onxuiPwd} placeholder='输入新密码,包含数字和字母的8~20位密码' />
        </div>
        <div className='inputpwd'>
          <input type="text" value={newXuiPwd} onChange={onnewXuiPwd} placeholder='确认新密码' />
        </div>
        <Button className='l-quedxui' onClick={gatIdpwd}>确定修改</Button>
      </Modal>

      <Modal title="更换手机号" footer={null} open={isModalOpenPhone} onCancel={handleCancelPhone}>
        <div className='log-phone'>
          <div className='chine'>
            <p>中国+86</p>
            <p><img src={img3} alt="" /></p>
          </div>
          <input type="text"
            placeholder='请输入手机号'
            value={getuser}
            onChange={toGetuser}
          />
        </div>
        <div className='pwd-yanz'>
          <input type="text" placeholder='验证码' />
          <CaptchaComponent></CaptchaComponent>
        </div>
        <div className='loginpwd'>
          <input type="text" value={yanPwd} onChange={getYanPwd} placeholder='请输入登录密码'/>
        </div>
        <Button className='l-quedxui' onClick={gatIdPhone}>确定更改</Button>
      </Modal>
    </div>
  )
}
